<template>
  <div class="app-container">
    <div class="table-container">
      <el-table ref="selectSessionTable" height="100%" :data="list" style="width: 100%" v-loading="listLoading" border>
        <el-table-column label="编号" width="80" align="center">
          <template #default="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="秒杀时间段名称" minWidth="130" align="center">
          <template #default="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column label="每日开始时间" width="160" align="center">
          <template #default="scope">{{ formatDateTime(scope.row.startTime) }}</template>
        </el-table-column>
        <el-table-column label="每日结束时间" width="160" align="center">
          <template #default="scope">{{ formatDateTime(scope.row.endTime) }}</template>
        </el-table-column>
        <el-table-column label="商品数量" minWidth="100" align="center">
          <template #default="scope">{{ scope.row.productCount }}</template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button size="small" link type="primary" @click="handleShowRelation(scope.row)">商品列表 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup lang="ts">
import { fetchSelectList } from '@/api/flashSession'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { FlashSession } from '@/models/flashSession'
import { formatDateTime } from '@/utils/format'

defineOptions({ name: 'selectSessionList' })
const route = useRoute()
const router = useRouter()
const list = ref<FlashSession[]>([])
const listLoading = ref(false)
getList()

function handleShowRelation(row: FlashSession) {
  router.push({
    path: '/sms/flash/productRelation',
    query: {
      flashPromotionId: route.query.flashPromotionId,
      flashPromotionSessionId: row.id,
    },
  })
}

async function getList() {
  listLoading.value = true
  try {
    const response = await fetchSelectList({ flashPromotionId: Number(route.query.flashPromotionId) })
    list.value = response.data.data
  } finally {
    listLoading.value = false
  }
}
</script>
<style scoped>
.operate-container {
  margin-top: 0;
}
</style>
